<template>
  <div>
    <HomeHeader></HomeHeader>
    <TypeNav></TypeNav>
    <el-form>
      <div class="box">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">盛世绿能招投标系统</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/procurementPlan' }">采购信息</el-breadcrumb-item>
          <el-breadcrumb-item >采购详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="plan-grid-content">
          <h1 style="text-align: center;padding-top: 20px;">采购详情</h1>
          <el-tabs @tab-click="Info" v-model="paneName">
            <p style="border-left: solid 5px;border-color: #0065b5 !important;padding-left: 7px;">采购信息</p>
            <el-descriptions direction="vertical" class="margin-top" :column="4" size="medium" border>
              <el-descriptions-item label="采购计划编号">{{ form.aaCode }}</el-descriptions-item>
              <el-descriptions-item label="计划名称">{{ form.aName }}</el-descriptions-item>
              <el-descriptions-item label="创建人">{{ form.createBy }}</el-descriptions-item>
              <el-descriptions-item label="创建部门">{{ form.aCreateDept }}</el-descriptions-item>
              <el-descriptions-item label="附件">
                <el-button type="primary" @click="download(form.fjAnnex)">
                  下载附件<i class="el-icon-download"></i>
                </el-button>
                <p v-for="i in file.fileUrls.length">
                  <a :href="file.fileUrls[i-1]" target="_blank">{{ file.fileName[i - 1] }}</a>
                  <!--              <i @click="onlinePreViewFile(file.urls[i-1],file.names[i - 1])"-->
                  <!--                 class="el-icon-folder-opened file_icon"></i>-->
                </p>
              </el-descriptions-item>
            </el-descriptions>
            <p style="margin-top: 25px;border-left: solid 5px;border-color: #0065b5 !important;padding-left: 7px;">预算信息</p>
            <el-table max-height="250" :data="budgetData" style="margin-top: 5px">
              <el-table-column label="序号" align="center">
                <template slot-scope="scope">
                  {{ scope.$index }}
                </template>
              </el-table-column>
              <el-table-column
                  height="250"
                  align="center"
                  header-align="center"
                  prop="duDept"
                  label="部门名称">
              </el-table-column>
              <el-table-column
                  prop="duId"
                  align="center"
                  label="预算科目编号">
              </el-table-column>
              <el-table-column
                  prop="duName"
                  align="center"
                  label="预算科目名称">
              </el-table-column>
            </el-table>
            <!-- 行项目 -->
            <p style="margin-top: 25px;border-left: solid 5px;border-color: #0065b5 !important;padding-left: 7px;">行项目信息</p>
            <el-table @cell-click="click" v-loading="loading" :data="itemList" style="margin-top: 5px">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-descriptions border>
                    <el-descriptions-item label="产品名称">{{ props.row.ppmDevice.tName }}</el-descriptions-item>
                    <el-descriptions-item label="计量单位">{{ props.row.ppmDevice.tUnit }}</el-descriptions-item>
                    <el-descriptions-item label="税率">{{ props.row.ppmDevice.shui }}</el-descriptions-item>
                    <el-descriptions-item label="类别">
                      <el-tag size="small">{{ props.row.ppmDevice.category }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="需求说明">{{ props.row.ppmDevice.tIllustrate }}
                    </el-descriptions-item>
                    <el-descriptions-item label="规格型号">{{ props.row.ppmDevice.tModel }}</el-descriptions-item>
                  </el-descriptions>
                </template>
              </el-table-column>
              <el-table-column label="行项目编号" align="center" prop="vCode" width="160"/>
              <el-table-column label="数量" align="center" prop="vCount"/>
              <el-table-column label="采购人" align="center" prop="vPerson"/>
              <el-table-column label="交付时间" align="center" prop="vDeliveryTime" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.vDeliveryTime, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="交付地点" align="center" prop="vDeliveryArea" width="150"/>
              <el-table-column label="需求说明" align="center" prop="vIllustrate"/>
              <el-table-column label="采购方式" align="center" prop="procurementMethod"/>
            </el-table>
            <span style="color: red;">展开表格行查看更多</span>
          </el-tabs>
          <div slot="footer" class="dialog-footer responsive-container">
            <el-button @click="cancel" style="justify-content: flex-end;margin-bottom: 20px;">返回采购信息</el-button>
          </div>
        </div>
      </div>
    </el-form>
    <HomeFloor></HomeFloor>
  </div>
</template>
<script>

import HomeHeader from "@/components/home/HomeHeader";
import TypeNav from "@/components/home/TypeNav";
import HomeFloor from "@/components/home/HomeFloor.vue";
import {getToken} from "@/utils/auth";
import modal from "@/plugins/modal";
import {selectProcurementPlanByIdForThreeTables,selectPpmBudgetByAid} from '@/api/system/procurement.js';


export default {
  name: 'planDetail',
  components:{
    HomeHeader,
    TypeNav,
    HomeFloor
  },
  props: [],
  data() {
    return {
      file: {
        fileUrls: [],
        fileName: []
      },
      planList: [],
      itemList: [],
      openByType: false,
      fullscreenLoading: false,
      typeRadio: 1,
      noBidType: 1,
      form: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        aAstate: null
      },
      loading: false,
      total: 0,
      budgetData: [],
      yilist: [],
      paneName: '',
      rules: {}
    }
  },
  created() {
    let obj = this.$route.query;
    this.Info(obj);
  },
  methods: {
    //查询招标公示
    Info(row) {
      selectProcurementPlanByIdForThreeTables(row.aid).then(res => {
        this.open = true;
        //行项目信息处理
        if(res.data.data.items && res.data.data.items.length > 0){
          let row = res.data.data.items[0];
          if(row && row.vCode){
            this.itemList = res.data.data.items;
          }
        }
        this.loading = false;
        this.form = res.data.data;
        if (res.data.data.file.anName != null && res.data.data.file.anUrl != null) {
          this.file.fileUrls = res.data.data.file.anUrl.split(",");
          this.file.fileName = res.data.data.file.anName.split(",");
        }
        selectPpmBudgetByAid(row.aid).then(res => {
          console.log(res.data.data)
          this.budgetData = null;
          this.budgetData = res.data.data;
        }).catch(err => {
          this.$modal.msgError("服务器出错，请联系管理员！！！" + err);
        })
      }).catch(err => {
        console.log(err)
        modal.msgError("服务器出错，请联系管理员！！！");
      })
    },
    cancel(){
      this.$router.push("/procurementPlan")
    },
    click(row) {
      /*if (row.ppmBudget.duName != null) {
        let list = [];
        list.push(row.ppmBudget)
        this.budgetData = list;
      } else {
        this.budgetData = null;
      }*/
    },
    download() {
      if (this.file.fileUrls.length === 0) {
        this.$modal.msgError("没有附件可下载，请上传附件！！")
        return;
      }
      let name = encodeURIComponent(this.file.fileUrls);
      const url = process.env.VUE_APP_BASE_API + `/ppm/file/downloadFiles?file=${name}`;
      const a = document.createElement('a')
      a.setAttribute('target', '_blank')
      a.setAttribute('href', url)
      a.click()
    },
    parseTime(time, pattern) {
      if (arguments.length === 0 || !time) {
        return null
      }
      const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
          time = parseInt(time)
        } else if (typeof time === 'string') {
          time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
        if (result.length > 0 && value < 10) {
          value = '0' + value
        }
        return value || 0
      })
      return time_str
    },

  }
}

</script>
<style>
.box {
  width: 1400px;
  margin: 10px auto;
  min-height: 900px;
}

.el-tag {
  background-color: #ecf5ff;
  border-color: #d9ecff;
  height: 34px;
  padding: 0 0px;
  line-height: 30px;
  font-size: 12px;
  color: #0065B5;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
}

.plan-grid-content {
  background-color: white;
  margin-top: 21px;
  width: 1360px;
  height: auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
}
.responsive-container {
  display: flex;
  justify-content: right; /* 移动端居中 */
}

p {
  margin: 10px 0;
}

.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  margin: 20px auto;
//padding-left: 20px; width: 550px;
}
</style>
